<template>
  <div class="content-container" :style="'height: ' + clientHeight + 'px'">
    <div class="personal-container">
      <div class="status-menu">
        <el-menu :default-active="defaultMenuActive" class="el-menu-demo" mode="horizontal" @select="handleSelectMenu">
          <el-menu-item index="">全部</el-menu-item>
          <el-menu-item index="lesson">课程</el-menu-item>
        </el-menu>
      </div>
      <div v-if="defaultMenuActive !== ''" v-loading="dataLoading">
        <empty v-if="!topicList || !topicList.length"/>
        <el-row class="row" :style="'height: ' + (clientHeight - 50) + 'px'" v-else>
          <el-col :span="8">
            <div class="comment-list-wrapper" @scroll="topicListScrollEvent">
              <div class="comment-load-more-wrapper">
                <el-input size="mini" placeholder="搜索标题" clearable v-model="topicListParam.keyword" style="width: 96%;margin: 10px 2%;">
                  <template #append>
                    <el-button @click="searchTopic">搜索</el-button>
                  </template>
                </el-input>
                <template v-for="item in topicList" :key="item.id">
                  <div class="comment-item-wrapper" :class="{'select' : selectTopic.id === item.id}">
                    <div class="article-item" @click="selectTopicHandle(item)">
                      <div class="article-item-cover" :style="'background-image: url(&quot;' + item.image + '&quot;);'"></div>
                      <div class="article-item-content has-img">
                        <div class="article-item-content-title">{{item.name}}</div>
                        <div class="article-item-content-footer"><span>评论 {{item.commentNum || 0}}</span></div>
                      </div>
                    </div>
                  </div>
                </template>
                <div v-if="noMoreTopicList" class="load-more-no-more-tips">我是有底线的</div>
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="topic-comment-list-wrapper">
              <topic-comment :topic-type="defaultMenuActive" :topic-id="selectTopic.id"/>
            </div>
          </el-col>
        </el-row>
      </div>
      <div v-else v-loading="dataLoading">
        <empty v-if="!commentList || !commentList.length" tips="暂无评论"/>
        <el-row class="row" :style="'height: ' + (clientHeight - 50) + 'px'" v-else>
          <el-col :span="12">
            <div class="comment-list-wrapper" @scroll="commentListScrollEvent">
              <div class="comment-load-more-wrapper">
                <template v-for="item in commentList" :key="item.id">
                  <div class="comment-item-wrapper" :class="{'select' : selectComment.id === item.id}">
                    <comment-item :reply-num="item.replyList && item.replyList.length || 0" :item="item" :member="member" :comment-id="selectComment.id" :submit-callback="submitCallback" @click="selectCommentHandle(item)"/>
                  </div>
                </template>
                <div v-if="noMoreComment" class="load-more-no-more-tips">我是有底线的</div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="comment-sub-list-wrapper" v-if="selectComment && selectComment.id">
              <div class="comment-item-wrapper-select">
                <comment-item :reply-num="selectComment && selectComment.replyList && selectComment.replyList.length || 0" :member="member" :item="selectComment" :submit-callback="submitCallback" :delete-callback="deleteCallback" :comment-id="selectComment.id"/>
              </div>
              <div class="comment-count">全部&nbsp;{{selectComment && selectComment.replyList && selectComment.replyList.length || 0}}&nbsp;条回复</div>
              <empty v-if="!selectComment.replyList || !selectComment.replyList.length" tips="暂无回复"/>
              <div class="reply-list" v-else>
                <template v-for="item in selectComment.replyList" :key="item.id">
                  <comment-item :reply-num="-1" :member="member" :item="item" :submit-callback="submitCallback" :comment-id="selectComment.id"/>
                </template>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  import {ref} from "vue"
  import commentItem from "./commentItem"
  import topicComment from "./list"
  import empty from "./empty"
  import router from "../../router"
  import {getCommentList, findTopicList} from "../../api/comment";
  import {useRoute} from "vue-router";

  export default {
    name: "memberComment",
    components: {
      commentItem,
      topicComment,
      empty
    },
    setup() {
      const route = useRoute()
      const dataLoading = ref(true)
      const member = ref({})
      const param = ref({
        topicId: "",
        topicType: "",
        current: 1,
        size: 10
      })
      const commentList = ref([])
      const selectComment = ref({})
      const noMoreComment = ref(false)
      const loadCommentList = () => {
        dataLoading.value = true
        getCommentList(param.value, res => {
          console.log(res)
          dataLoading.value = false
          if (!res || !res.list || !res.list.length) {
            if (res.total > param.value.size) {
              noMoreComment.value = true
            }
            param.value.current = param.value.current - 1
            return
          }
          if (res.list.length < param.value.size) {
            noMoreComment.value = true
          }
          for (const listElement of res.list) {
            commentList.value.push(listElement)
          }
          if (!selectComment.value || !selectComment.value.id) {
            if (res.list && res.list.length) {
              selectComment.value = res.list[0]
            }
          } else {
            for (const re of res.list) {
              if (selectComment.value.id === re.id) {
                selectComment.value = re;
                break
              }
            }
          }
        })
      }
      const selectCommentHandle = (item) => {
        selectComment.value = item
      }
      const topicListParam = ref({
        current: 1,
        size: 10,
        keyword: "",
        topicType: "lesson"
      })
      const topicList = ref([])
      const selectTopic = ref({id: 0})
      const noMoreTopicList = ref(false)
      const loadTopicList = () => {
        dataLoading.value = true
        findTopicList(topicListParam.value, res => {
          dataLoading.value = false
          console.log(res)
          if (!res || !res.list || !res.list.length) {
            if (res.total > param.value.size) {
              noMoreTopicList.value = true
            }
            topicListParam.value.current = topicListParam.value.current - 1
            return
          }
          if (res.list.length < param.value.size) {
            noMoreTopicList.value = true
          }
          if (!selectTopic.value || !selectTopic.value.id) {
            if (res.list && res.list.length) {
              selectTopic.value = res.list[0]
            }
          } else {
            for (const re of res.list) {
              if (selectTopic.value.id === re.id) {
                selectTopic.value = re;
                break
              }
            }
          }
          for (const listElement of res.list) {
            topicList.value.push(listElement)
          }
        })
      }
      const selectTopicHandle = (item) => {
        console.log(item)
        selectTopic.value = item
      }
      const topicListScrollEvent = (e) => {
        let scrollTop = e.srcElement.scrollTop
        let clientHeight = e.srcElement.offsetHeight
        let scrollHeight = e.srcElement.scrollHeight
        // 滚动到底部，逻辑代码
        if (scrollTop + clientHeight >= scrollHeight) {
          if (!noMoreTopicList.value) {
            topicListParam.value.current = topicListParam.value.current + 1
            loadTopicList()
          }
        }
      }
      const defaultMenuActive = ref("")
      const handleSelectMenu = (val) => {
        commentList.value = []
        if ("lesson" === val) {
          topicListParam.value.topicType = val
          loadTopicList()
        } else {
          param.value.topicType = val
          loadCommentList()
          topicList.value = []
          router.push("/comment/list")
        }
        defaultMenuActive.value = val
      }
      const submitCallback = () => {
        loadCommentList()
      }
      const deleteCallback = () => {
        loadCommentList()
      }
      const commentListScrollEvent = (e) => {
        let scrollTop = e.srcElement.scrollTop
        let clientHeight = e.srcElement.offsetHeight
        let scrollHeight = e.srcElement.scrollHeight
        // 滚动到底部，逻辑代码
        if (scrollTop + clientHeight >= scrollHeight) {
          if (!noMoreComment.value) {
            param.value.current = param.value.current + 1
            loadCommentList()
          }
        }
      }
      let clientHeight = document.documentElement.clientHeight - 90;
      if (clientHeight < 500) {
        clientHeight = 500;
      }
      const type = route.query.type
      const topicId = route.query.topicId
      if (type && topicId) {
        const topicName = route.query.topicName
        if (topicName) {
          topicListParam.value.keyword = topicName
        }
        if ("lesson" === type) {
          selectTopic.value = {id: parseInt(topicId)}
          loadTopicList()
        }
        defaultMenuActive.value = type
      } else {
        loadCommentList()
      }
      const searchTopic = () => {
        topicList.value = []
        noMoreTopicList.value = false
        selectTopic.value = {}
        topicListParam.value.type = type
        loadTopicList()
      }
      return {
        param,
        clientHeight,
        member,
        commentList,
        selectComment,
        selectCommentHandle,
        defaultMenuActive,
        handleSelectMenu,
        submitCallback,
        deleteCallback,
        commentListScrollEvent,
        topicListParam,
        noMoreComment,
        topicList,
        noMoreTopicList,
        selectTopic,
        selectTopicHandle,
        topicListScrollEvent,
        searchTopic,
        dataLoading
      }
    }
  }
</script>

<style lang="scss" scoped>
  .personal-container {
    background-color: #FFFFFF;
    margin: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .row {
    .el-col {
      height: 100%;
    }
    .topic-comment-list-wrapper {
      margin-left: 30px;
      overflow-x: hidden;
      overflow-y: auto;
      height: 100%;
      &::-webkit-scrollbar { width: 0 !important }
      -ms-overflow-style: none;
      overflow: -moz-scrollbars-none;
    }
  }
  .el-menu-item {
    height: 80px;
    .el-icon-close {
      display: none;
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-50%);
      color: #999;
    }
  }
  .el-menu-item:focus, .el-menu-item:hover {
    height: 80px;
    em {
      display: none;
    }
    .el-icon-close {
      display: block;
    }
  }
  .el-menu-item:focus{
    em {
      display: block;
    }
    .el-icon-close {
      display: none;
    }
  }
  .status-menu {
    padding-bottom: 10px;
    .el-menu-demo {
      border: 0;
      margin-left: 30px;
      .el-menu-item {
        height: 40px;
        padding: 0;
        margin-left: 30px;
        font-size: 16px;
        color: #333333;
        line-height: 40px;
        &:first-child {
          margin-left: 0;
        }
        &:hover {
          color: $--color-primary;
        }
      }
      .el-menu-item.is-active {
        color: $--color-primary;
        font-weight: 500;
      }
    }
  }
  .comment-list-wrapper {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
    &::-webkit-scrollbar { width: 0 !important }
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    .comment-load-more-wrapper {
      border-right: 1px solid #e8e8e8;
      .load-more-no-more-tips {
        color: #cccccc;
        text-align: center;
        font-size: 14px;
        padding: 20px 0;
      }
      .comment-item-wrapper {
        cursor: pointer;
        position: relative;
        border-left: 2px solid #ffffff;
        &:after {
          content: " ";
          height: 1px;
          background-color: #e8e8e8;
          position: absolute;
          bottom: 0;
          right: 30px;
          left: 30px;
        }
        &:last-child:after {
          height: 0;
        }
        &:hover {
          border-left: 2px solid transparent;
          background-color: #e8e8e8;
          border-left-color: $--color-primary;
        }
        .article-item {
          display: flex;
          padding: 20px 30px;
          .article-item-cover {
            display: inline-block;
            width: 78px;
            height: 78px;
            background-size: cover;
            background-position: 50%;
            background-repeat: no-repeat;
            border-radius: 2px;
          }
          .article-item-content {
            flex: 1;
            width: calc(100% - 84px);
            display: flex;
            flex-direction: column;
            .article-item-content-title {
              font-size: 15px;
              line-height: 24px;
              color: var(--black01);
              height: 48px;
              max-height: 48px;
              -webkit-box-orient: vertical;
              text-overflow: ellipsis;
              -webkit-line-clamp: 2;
              display: -webkit-box;
              overflow: hidden;
              word-break: break-all;
            }
            .article-item-content-footer {
              margin-top: 8px;
              line-height: 1.43;
              color: #999999;
            }
          }
          .article-item-content.has-img {
            margin-left: 12px;
          }
        }
      }
      .select {
        border-left: 2px solid transparent;
        background-color: #e8e8e8;
        border-left-color: $--color-primary;
      }
    }
  }
  .comment-sub-list-wrapper {
    overflow: hidden;
    overflow-y: auto;
    height: 100%;
    &::-webkit-scrollbar { width: 0 !important }
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    .comment-item-wrapper-select {
      position: relative;
    }
    .comment-count {
      padding-left: 20px;
      padding-right: 20px;
      margin: 10px 0;
    }
    .reply-list {
      position: relative;
      .comment-item {
        padding: 10px 20px;
      }
    }
  }
</style>
<style>
  body {
    background-color: #f5f5f5!important;
    height: 100%;
  }
</style>
